<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>陕西水务集团大数据云平台</title>

    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap/bootstrap-table.min.css">
    <link rel="stylesheet" href="/css/custom.css">
    <link rel="stylesheet" href="/css/animate.min.css">
    <link rel="stylesheet" href="/css/layui.css">
    <script src="/js/jquery-3.3.1.js"></script>
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <script src="/js/bootstrap/bootstrap-table.min.js"></script>
    <script src="/js/echarts.js"></script>
    <script src="/js/custom.js"></script>
    <script src="/js/layui.js"></script>
    <script src="/js/element.js"></script>

    <script>
        /**
         *
         * 获取当前时间
         */
        function p(s) {
            return s < 10 ? '0' + s : s;
        }

        function nowTime() {
            var myDate = new Date();
            //获取当前年
            var year = myDate.getFullYear();
            //获取当前月
            var month = myDate.getMonth() + 1;
            //获取当前日
            var date = myDate.getDate();
            var h = myDate.getHours();       //获取当前小时数(0-23)
            var m = myDate.getMinutes();     //获取当前分钟数(0-59)
            var s = myDate.getSeconds();
            return p(h) + ':' + p(m) + ":" + p(s);
        }

        function dateTime() {
            var myDate = new Date();
            //获取当前年
            var year = myDate.getFullYear();
            //获取当前月
            var month = myDate.getMonth() + 1;
            //获取当前日
            var date = myDate.getDate();
            var h = myDate.getHours();       //获取当前小时数(0-23)
            var m = myDate.getMinutes();     //获取当前分钟数(0-59)
            var s = myDate.getSeconds();
            return year + '-' + month + "-" + date;
        }

        function weekFun() {
            var day = new Date();
            var today = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
            return today[day.getDay()];
        }

        function time() {
            var time = nowTime();
            var date = dateTime();
            var week = weekFun();
            $("#nowTime").html(time);
            $(".time-year").html(date);
            $(".time-xingqi").html(week);
        }

        layui.use('element', function () {
            var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

            //监听导航点击
            element.on('nav(demo)', function (elem) {
                //console.log(elem)
                alert(elem);
                layer.msg(elem.text());
            });
        });

        $(function () {
            setInterval(time, 1000);// 注意函数名没有引号和括弧！
        });
    </script>
    <style>
        .layui-bg-cyan {
            background-color: #062852d9 !important;
            color: #fff !important;
        }
    </style>
</head>
<body>
<div class="container-div">
    <div class="header-div">
        <img id="sys_name" class="title-img" src="/imgs/title-text.png">
    </div>
    <div class="left-chart-div">
        <div class="left-top-container">
            <div class="middle-block-bg weather-bg enter-anmi-time1 animated fadeInLeftBig"
                 style="text-align: left">
                <div class="weather-box-left">
            <span class="flag-label">
                口
            </span>
                    <span class="area-name">
                陕西省
                </span>
                    <div class="weather-div">
                        <img class="weather-img" src="/imgs/sun.png">
                        <span class="weather-text">31℃</span>
                    </div>
                    <div class="time-div">
                        <span id="nowTime" class="time-text">00:00:00</span>
                    </div>
                </div>
                <div class="weather-box-center">
                    <div class="weather-split-line"></div>
                </div>
                <div class="weather-box-right">
                    <div class="weather-box-right-inner">
                        <div class="time-year">0000-00-00</div>
                        <div class="time-xingqi">星期</div>
                        <div class="time-tip"><span id="area_count">82</span>县区轮回显示</div>
                    </div>
                </div>
            </div>
            <div class="middle-block-grid enter-anmi-time1 animated fadeInLeftBig">
                <div class="small-block-bg num-bg">
                    <div class="num-box-title">
                <span class="flag-label">
                口
                </span>
                        <span class="water-chart-info-title">
                水质达标率
                </span>
                    </div>
                    <div class="num-text">
                        <span id="reach_standard_percent">93</span>
                        <span class="num-unit">%</span>
                    </div>
                </div>
                <div class="small-block-bg num-bg">
                    <div class="num-box-title">
                <span class="flag-label">
                口
                </span>
                        <span class="water-chart-info-title">
                当日供水量
                </span>
                    </div>
                    <div class="num-text">
                        <span id="cur_day_water_num">523</span>
                        <span class="num-unit">X10m³</span>
                    </div>
                </div>
                <div class="small-block-bg num-bg">
                    <div class="num-box-title">
                <span class="flag-label">
                口
                </span>
                        <span class="water-chart-info-title">
                当月供水量
                </span>
                    </div>
                    <div class="num-text">
                        <span id="cur_month_water_num">15239</span>
                        <span class="num-unit">X10m³</span>
                    </div>
                </div>
                <div class="small-block-bg num-bg">
                    <div class="num-box-title">
                <span class="flag-label">
                口
                </span>
                        <span class="water-chart-info-title">
                当年供水量
                </span>
                    </div>
                    <div class="num-text">
                        <span id="cur_yaer_water_num">12283</span>
                        <span class="num-unit">X10m³</span>
                    </div>
                </div>
            </div>
            <div class="middle-block-bg-2 enter-anmi-time1 animated fadeInLeftBig">

                <div class="small-block-bg-2">
                    <div class="small-block-bg-3 num-bg">
                        <div class="num-box-title">
                    <span class="flag-label">
                    口
                    </span>
                            <span class="water-chart-info-title">
                    水费收费率
                    </span>
                        </div>
                        <div class="num-text">
                            <span id="water_fee_percent">80</span>
                            <span class="num-unit">%</span>
                        </div>
                    </div>
                    <div class="small-block-bg-3 num-bg" style="margin-top: 15px">
                        <div class="num-box-title">
                    <span class="flag-label">
                    口
                    </span>
                            <span class="water-chart-info-title">
                    其他指标
                    </span>
                        </div>
                        <div class="num-text">
                            <span id="other_num">23143</span>
                            <span class="num-unit">X10m³</span>
                        </div>
                    </div>
                </div>
                <div class="small-block-bg-2 num-bg" style="margin-left: 15px">
                    <div class="num-box-title">
                    <span class="flag-label">
                    口
                    </span>
                        <span class="notice-info-title">
                    通知栏
                    </span>
                    </div>
                    <div class="notice-div">
                        <img class="notice-icon" src="/imgs/notice_icon.png">
                    </div>
                </div>
            </div>
        </div>
        <div class="chart-collect">
            <div class="chart-item num-bg enter-anmi-time2 animated fadeInLeftBig">
                <div class="num-box-title chart-title-left">
                    <span class="flag-label">
                    口
                    </span>
                    <span class="chart-info-title">
                    当年供水量
                    </span>
                </div>
                <div class="chart-title-right">
                    当年供水量<span id="month_water_num" class="water-num">28699</span>10Xm³
                </div>
                <div id="chart_month_support_water_num" class="sl-chart-content"></div>
                <div class="bottom-banner">
                    <div class="status-flag-last-year"></div>
                    <span class="status-flag-text">去年</span>
                    <div class="status-flag-current-year"></div>
                    <span class="status-flag-text">当年</span>
                </div>
            </div>
            <div class="chart-item num-bg enter-anmi-time2 animated fadeInLeftBig">
                <div class="num-box-title chart-title-left">
                    <span class="flag-label">
                    口
                    </span>
                    <span class="chart-info-title">
                    当月供水量
                    </span>
                </div>
                <div class="chart-title-right">
                    当月供水量<span id="day_water_num" class="water-num">28699</span>10Xm³
                </div>
                <div id="chart_day_support_water_num" class="sl-chart-content"></div>
            </div>
            <div class="chart-item num-bg enter-anmi-time2 animated fadeInLeftBig">
                <div class="num-box-title chart-title-left">
                    <span class="flag-label">
                    口
                    </span>
                    <span class="chart-info-title">
                    当天供水量
                    </span>
                </div>
                <div class="chart-title-right">
                    昨日总流量<span id="last_day_water_num" class="water-num">28699</span>10Xm³
                </div>
                <div id="chart_hour_support_water_num" class="sl-chart-content"></div>
                <div class="bottom-banner">
                    <div class="status-flag-last-year"></div>
                    <span class="status-flag-text">昨天</span>
                    <div class="status-flag-current-year"></div>
                    <span class="status-flag-text">今天</span>
                </div>
            </div>
            <div class="chart-item num-bg enter-anmi-time3 animated fadeInLeftBig">
                <div class="chart-item num-bg enter-anmi-time2 animated fadeInRightBig">
                    <div class="num-box-title chart-title-left">
                    <span class="flag-label">
                    口
                    </span>
                        <span class="chart-info-title">
                    各项指标最大/最小值
                    </span>
                    </div>
                    <div class="chart-title-right">

                    </div>
                    <div id="chart_quota" class="sl-chart-content dashboard-container">
                        <div>
                            <div id="dashboard_item_1" class="dashboard-item"></div>
                        </div>
                        <div>
                            <div id="dashboard_item_2" class="dashboard-item"></div>
                        </div>
                        <div>
                            <div id="dashboard_item_3" class="dashboard-item"></div>
                        </div>
                        <div>
                            <div id="dashboard_item_4" class="dashboard-item"></div>
                        </div>
                        <div>
                            <div id="dashboard_item_5" class="dashboard-item"></div>
                        </div>
                        <div>
                            <div id="dashboard_item_6" class="dashboard-item"></div>
                        </div>
                        <div>
                            <div id="dashboard_item_7" class="dashboard-item"></div>
                        </div>
                        <div>
                            <div id="dashboard_item_8" class="dashboard-item"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chart-item num-bg enter-anmi-time3 animated fadeInLeftBig">
                <div class="chart-item num-bg enter-anmi-time2 animated fadeInRightBig">
                    <div class="num-box-title chart-title-left">
                    <span class="flag-label">
                    口
                    </span>
                        <span class="chart-info-title">
                    能效占比TOP5
                    </span>
                    </div>
                    <div class="chart-title-right">

                    </div>
                    <div id="chart_energy_efficiency_ratio" class="sl-chart-content"></div>
                </div>
            </div>
            <div class="chart-item num-bg enter-anmi-time3 animated fadeInLeftBig">
                <div class="chart-item num-bg enter-anmi-time2 animated fadeInRightBig">
                    <div class="num-box-title chart-title-left">
                    <span class="flag-label">
                    口
                    </span>
                        <span class="chart-info-title">
                    各指标最大最小值
                    </span>
                    </div>
                    <div class="chart-title-right" style="margin-top: 20px">
                        <div class="status-flag-last-year"></div>
                        <span class="status-flag-text">LEAST</span>
                        <div class="status-flag-current-year" style="margin-left: 40px"></div>
                        <span class="status-flag-text">MAX</span>
                    </div>
                    <div id="chart_quota_max_min_value" class="sl-chart-content"></div>
                    <div class="bottom-banner">
                        <ul class="layui-nav layui-bg-cyan" lay-filter="demo">
                            <li class="layui-nav-item"><a href="">PH值</a></li>
                            <li class="layui-nav-item layui-this"><a href="">浊度</a></li>
                            <li class="layui-nav-item"><a href="">COD</a></li>
                            <li class="layui-nav-item"><a href="">氨氮</a></li>
                            <li class="layui-nav-item"><a href="">PH值</a></li>
                            <li class="layui-nav-item"><a href="">浊度</a></li>
                            <li class="layui-nav-item"><a href="">PH值</a></li>
                            <li class="layui-nav-item"><a href="">氨氮</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="map-chart-div">
        <!--<img class="map-img animated bounceIn" src="/imgs/map.png">
        <img class="menu-img animated fadeInUp" src="/imgs/menu.png">-->
        <div id="map-container">
            <div id="proe_map" class="smallDiv1"></div>
            <div class="smallDiv2">
                <img src="/imgs/map_bg.png">
            </div>
        </div>
    </div>
    <div class="right-chart-div">
        <div class="right-top-container">
            <div class="monitor-num-container  enter-anmi-time1 animated fadeInRightBig">
                <div class="num-bg">
                    <div class="num-box-title">
                    <span class="flag-label">
                    口
                    </span>
                        <span class="water-chart-info-title">
                    水源地
                    </span>
                    </div>
                    <div class="num-text">
                        <span id="water_src_count">53</span>
                        <span class="num-unit">个</span>
                    </div>
                </div>
                <div class="num-bg">
                    <div class="num-box-title">
                    <span class="flag-label">
                    口
                    </span>
                        <span class="water-chart-info-title">
                    输水管
                    </span>
                    </div>
                    <div class="num-text">
                        <span id="pipe_count">69</span>
                        <span class="num-unit">个</span>
                    </div>
                </div>
                <div class="num-bg">
                    <div class="num-box-title">
                    <span class="flag-label">
                    口
                    </span>
                        <span class="water-chart-info-title">
                    净水厂
                    </span>
                    </div>
                    <div class="num-text">
                        <span id="water_factory_count">166</span>
                        <span class="num-unit">个</span>
                    </div>
                </div>
                <div class="num-bg">
                    <div class="num-box-title">
                    <span class="flag-label">
                    口
                    </span>
                        <span class="water-chart-info-title">
                    供水网
                    </span>
                    </div>
                    <div class="num-text">
                        <span id="water_net_count">85</span>
                        <span class="num-unit">个</span>
                    </div>
                </div>
                <div class="num-bg">
                    <div class="num-box-title">
                    <span class="flag-label">
                    口
                    </span>
                        <span class="water-chart-info-title">
                    用水户
                    </span>
                    </div>
                    <div class="num-text">
                        <span id="use_water_family">15,239</span>
                        <span class="num-unit">个</span>
                    </div>
                </div>
                <div class="num-bg">
                    <div class="num-box-title">
                    <span class="flag-label">
                    口
                    </span>
                        <span class="water-chart-info-title">
                    水表数
                    </span>
                    </div>
                    <div class="num-text">
                        <span id="water_table_count">56,457</span>
                        <span class="num-unit">个</span>
                    </div>
                </div>
            </div>
            <div class="video-container num-bg  enter-anmi-time1 animated fadeInRightBig">
                <div class="num-box-title">
                    <span class="flag-label">
                    口
                    </span>
                    <span class="water-chart-info-title">
                    各个基站组态图
                    </span>
                    <div class="video-container-top-right">
                        <div class="status-flag-ok"></div>
                        <span class="status-flag-text">正常</span>
                        <div class="status-flag-error"></div>
                        <span class="status-flag-text">正常</span>
                    </div>
                </div>
                <div class="video-content-gird">
                    <div class="video-content-left">
                        <div class="img-item"><img src="/imgs/img_item02.png"></div>
                        <div class="img-item"><img src="/imgs/img_item03.png"></div>
                        <div class="img-item"><img src="/imgs/img_item04.png"></div>
                    </div>
                    <div class="video-content-center">
                        <img class="img-item-big" src="/imgs/img_item01.png">
                    </div>
                    <div class="video-content-right">
                        <div class="img-item"><img src="/imgs/img_item05.png"></div>
                        <div class="img-item"><img src="/imgs/img_item06.png"></div>
                        <div class="img-item"><img src="/imgs/img_item07.png"></div>
                    </div>
                    <div class="video-text-list">
                        <div class="stat-num-text">58</div>
                        <div class="stat-text">副组态图</div>
                        <ui class="stat-list">
                            <li>01-泵站01</li>
                            <li>02-泵站02</li>
                            <li>03-泵站03</li>
                            <li>04-泵站04</li>
                            <li>05-泵站05</li>
                            <li>06-泵站06</li>
                        </ui>
                    </div>
                </div>
            </div>
        </div>
        <div class="chart-collect">
            <div class="chart-item num-bg enter-anmi-time2 animated fadeInRightBig">
                <div class="num-box-title chart-title-left">
                    <span class="flag-label">
                    口
                    </span>
                    <span class="chart-info-title">
                    N座水厂实时进出厂流量
                    </span>
                </div>
                <div class="chart-title-right">
                    总流量<span id="water_out_num" class="water-num">286995</span>10Xm³
                </div>
                <div id="chart_total_out_water_num" class="sl-chart-content"></div>
                <div class="bottom-banner">
                    <div class="status-flag-last-year"></div>
                    <span class="status-flag-text">昨天</span>
                    <div class="status-flag-current-year"></div>
                    <span class="status-flag-text">今天</span>
                </div>
            </div>
            <div class="chart-item num-bg enter-anmi-time2 animated fadeInRightBig">
                <div class="chart-item num-bg enter-anmi-time2 animated fadeInRightBig">
                    <div class="num-box-title chart-title-left">
                    <span class="flag-label">
                    口
                    </span>
                        <span class="chart-info-title">
                    水厂能耗比
                    </span>
                    </div>
                    <div class="chart-title-right">
                        平均能耗比<span class="water-num">286995</span>WKW
                    </div>
                    <div id="chart_energy_scale_num" class="sl-chart-content"></div>
                    <div class="bottom-banner">
                        <div class="status-flag-last-year"></div>
                        <span class="status-flag-text">水量</span>
                        <div class="status-flag-current-year"></div>
                        <span class="status-flag-text">能耗</span>
                    </div>
                </div>
            </div>
            <div class="chart-item num-bg enter-anmi-time2 animated fadeInRightBig">
                <div class="chart-item num-bg enter-anmi-time2 animated fadeInRightBig">
                    <div class="num-box-title chart-title-left">
                    <span class="flag-label">
                    口
                    </span>
                        <span class="chart-info-title">
                    抄表量、计收量
                    </span>
                    </div>
                    <div class="chart-title-right">
                        当月总抄表量<span class="water-num">286995</span>10Xm³
                    </div>
                    <div id="chart_total_table_num" class="sl-chart-content"></div>
                    <div class="bottom-banner">
                        <div class="status-flag-last-year"></div>
                        <span class="status-flag-text">抄表量</span>
                        <div class="status-flag-current-year"></div>
                        <span class="status-flag-text">计收量</span>
                    </div>
                </div>
            </div>
            <div class="chart-item num-bg enter-anmi-time3 animated fadeInRightBig">
                <div class="chart-item num-bg enter-anmi-time2 animated fadeInRightBig">
                    <div class="num-box-title chart-title-left">
                    <span class="flag-label">
                    口
                    </span>
                        <span class="chart-info-title">
                    供水管网压力(MPA)
                    </span>
                    </div>
                    <div class="chart-title-right">

                    </div>
                    <div id="chart_support_water_pressure" class="sl-chart-content">
                        <div id="data-table" class="table-responsive"
                             style="padding-top: 20px;padding-bottom: 20px;height: 100%;width: 100%;overfllow:hidden">
                            <table class="table table-striped table-hover" style="height: 100%;width: 100%">
                                <thead>
                                <tr style="background: #051830;font-size: 18px;color: white">
                                    <th>
                                        区县
                                    </th>
                                    <th>
                                        编号
                                    </th>
                                    <th>
                                        时间
                                    </th>
                                    <th>
                                        压力
                                    </th>
                                    <th>
                                        上限
                                    </th>
                                    <th>
                                        下限
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr style="background: #122c4e;font-size: 18px;color: white">
                                    <td>
                                        区域01
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                <tr style="background: #051830;font-size: 18px;color: white">
                                    <td>
                                        区域02
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                <tr style="background: #122c4e;font-size: 18px;color: white">
                                    <td>
                                        区域03
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                <tr style="background: #051830;font-size: 18px;color: white">
                                    <td>
                                        区域04
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                <tr style="background: #122c4e;font-size: 18px;color: white">
                                    <td>
                                        区域05
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                <tr style="background: #051830;font-size: 18px;color: white">
                                    <td>
                                        区域06
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                <tr style="background: #122c4e;font-size: 18px;color: white">
                                    <td>
                                        区域07
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                <tr style="background: #051830;font-size: 18px;color: white">
                                    <td>
                                        区域08
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                <tr style="background: #122c4e;font-size: 18px;color: white">
                                    <td>
                                        区域09
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                <tr style="background: #051830;font-size: 18px;color: white">
                                    <td>
                                        区域10
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                <tr style="background: #122c4e;font-size: 18px;color: white">
                                    <td>
                                        区域11
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                <tr style="background: #051830;font-size: 18px;color: white">
                                    <td>
                                        区域12
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                <tr style="background: #122c4e;font-size: 18px;color: white">
                                    <td>
                                        区域13
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                <tr style="background: #051830;font-size: 18px;color: white">
                                    <td>
                                        区域14
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                <tr style="background: #122c4e;font-size: 18px;color: white">
                                    <td>
                                        区域15
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                <tr style="background: #051830;font-size: 18px;color: white">
                                    <td>
                                        区域16
                                    </td>
                                    <td>
                                        #01
                                    </td>
                                    <td>
                                        2018/08/10
                                    </td>
                                    <td>
                                        0.36
                                    </td>
                                    <td>
                                        0.6
                                    </td>
                                    <td>
                                        0.2
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chart-item num-bg enter-anmi-time3 animated fadeInRightBig">
                <div class="chart-item num-bg enter-anmi-time2 animated fadeInRightBig">
                    <div class="num-box-title chart-title-left">
                    <span class="flag-label">
                    口
                    </span>
                        <span class="chart-info-title">
                    用水类型占比
                    </span>
                    </div>
                    <div class="chart-title-right">
                        单年总用水量<span class="water-num">286995</span>10Xm³
                    </div>
                    <div id="chart_used_water_type" class="sl-chart-content pie-chart-container">
                        <div id="pie_item_1" class="pie-item"></div>
                        <div id="pie_item_2" class="pie-item"></div>
                        <div id="pie_item_3" class="pie-item"></div>
                        <div id="pie_item_4" class="pie-item"></div>
                        <div id="pie_item_5" class="pie-item"></div>
                    </div>
                </div>
            </div>
            <div class="chart-item num-bg enter-anmi-time3 animated fadeInRightBig">
                <div class="chart-item num-bg enter-anmi-time2 animated fadeInRightBig">
                    <div class="num-box-title chart-title-left">
                    <span class="flag-label">
                    口
                    </span>
                        <span class="chart-info-title">
                    各基站实时监控
                    </span>
                    </div>
                    <div class="chart-title-right">

                    </div>
                    <div id="chart_station_realtime_monitor" class="sl-chart-content monitor-video-container">
                        <div class="monitor-item1">
                            <img class="big-video-img" src="/imgs/monitor_img1.png">
                        </div>
                        <div class="monitor-item2"><img class="small-video-img" src="/imgs/monitor_img2.png"></div>
                        <div class="monitor-item3"><img class="small-video-img" src="/imgs/monitor_img2.png"></div>
                        <div class="monitor-item4"><img class="small-video-img" src="/imgs/monitor_img2.png"></div>
                        <div class="monitor-item5"><img class="small-video-img" src="/imgs/monitor_img2.png"></div>
                        <div class="monitor-item6"><img class="small-video-img" src="/imgs/monitor_img2.png"></div>
                        <div class="monitor-item7"><img class="small-video-img" src="/imgs/monitor_img2.png"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>